<template>
  <div>
    <!-- 查询信息 -->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="searchData.Keywords" placeholder="关键字"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="ShowRoleList">查询</el-button>
        <el-button type="success" @click="AddRole">添加</el-button>
        <el-button type="danger" @click="batchDel">批量删除</el-button>
      </el-form-item>
    </el-form>
    <!-- 显示管理员信息 -->
    <el-table
      :data="RoleList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="RoleId" label="角色ID"> </el-table-column>
      <el-table-column prop="RoleName" label="角色名称"> </el-table-column>
      <el-table-column prop="RoleCode" label="角色编号"> </el-table-column>
      <el-table-column prop="Remark" label="备注"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="delRole(scope.row.RoleId)"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="editRole(scope.row.RoleId)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div align="center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageIndex"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 树形 -->
    <el-tree :data="options" :props="defaultProps"></el-tree>
    <!-- 添加弹框 -->
    <el-dialog
      title="添加角色"
      :visible.sync="dialogFormVisibleAdd"
      v-if="dialogFormVisibleAdd"
    >
      <add-role ref="add" @onAddSuccess="Reload"></add-role>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑角色"
      :visible.sync="dialogFormVisibleEdit"
      v-if="dialogFormVisibleEdit"
    >
      <edit-role ref="edit" :roleId="roleId" @onAddSuccess="Reload"></edit-role>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="SaveUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ShowRole, Delete, BatchDel } from "../../apis/role";
import { GetNodes } from "../../apis/menu";
import AddRole from "./AddRole";
import EditRole from "./EditRole";
export default {
  //注册组件
  components: {
    AddRole,
    EditRole,
  },
  //数据
  data() {
    return {
      options: [],
      defaultProps: {
        children: "Children",
        label: "MenuName",
      },
      multipleSelection: [],
      roleId: 0,
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit: false,
      RoleList: [],
      total: 0,
      //分页
      page: {
        pageIndex: 1,
        pageSize: 3,
      },
      //查询信息
      searchData: {
        Keywords: "",
        StartTime: "",
        EndTime: "",
      },
    };
  },
  //方法
  methods: {
    //显示级联
    LoadNodes() {
      GetNodes().then((m) => {
        this.options = m.Data;
      });
    },
    //关闭添加弹窗并刷新页面
    Reload() {
      this.dialogFormVisibleAdd = false;
      this.dialogFormVisibleEdit = false;
      this.ShowRoleList();
    },
    //添加保存
    Save() {
      this.$refs.add.submitForm("ruleForm");
    },
    //修改保存
    SaveUpdate() {
      this.$refs.edit.submitForm("ruleForm");
    },
    //弹出添加对话框
    AddRole() {
      this.dialogFormVisibleAdd = true;
    },
    //弹出修改对话框
    editRole(roleId) {
      this.roleId = roleId;
      this.dialogFormVisibleEdit = true;
    },
    //显示信息
    ShowRoleList() {
      ShowRole(Object.assign(this.page, this.searchData)).then((res) => {
        this.RoleList = res.Data.PageData;
        this.total = res.Data.Count;
      });
    },
    //删除
    delRole(id) {
      const _this = this;
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Delete({ RoleId: id }).then((res) => {
            if (res.Data) {
              this.$message({
                type: "success",
                message: "删除成功!",
                onClose: function () {
                  _this.Reload();
                },
              });
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //选中的信息
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除
    batchDel() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请至少选择一项！");
        return;
      }

      const _this = this;
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          BatchDel(this.multipleSelection.map((x) => x.RoleId)).then((res) => {
            if (res.Data) {
              this.$message({
                type: "success",
                message: "删除成功!",
                onClose: function () {
                  _this.Reload();
                },
              });
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //#region 分页事件
    //改变页大小
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.ShowRoleList();
    },
    //改变页索引
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.ShowRoleList();
    },
    //#endregion
  },
  //勾子函数
  created() {
    this.ShowRoleList();
    this.LoadNodes();
  },
};
</script>
<style>
</style>